<template>
    <view class="_service-wrapper">
        <view class="img-box">
            <image :src="serviceImg" class="service-img" />
        </view>
        <button class="_service-button" open-type="contact" session-from="xcx" show-message-card
          :send-message-path="sendMessagePath"></button>
    </view>
</template>
<script setup>
    import serviceImg from "../static/icons/kefu.png";
    defineProps({
        sendMessagePath: {
            type: String,
            default: '/pages/index/index'
        }
    });
</script>
<style lang="scss">
    ._service-wrapper {
      position: relative;
      width: 100%;
      padding: 10upx;
      background-color: #FF4D56;
      border-top-left-radius: 50%;
      border-bottom-left-radius: 50%;
      box-sizing: border-box;
      .img-box {
        width: 80upx;
        height: 80upx;
        display: flex;
        justify-content: center;
        align-items: center;
        .service-img {
            width: 100%;
            height: 100%;
        }
      }
      ._service-button {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        background: none;
        border: none;
        outline: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        box-sizing: border-box;
        box-shadow: none;
        &::after {
          border: none;
          display: none;
        }
        &::before {
          border: none;
          display: none;
        }
      }
    }
</style>